<template>
    <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect">
      <span style="color: #fff;font-size: 16px;" >
        {{country}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="zh">中文</el-dropdown-item>
        <el-dropdown-item command="en">英文</el-dropdown-item>
        <el-dropdown-item command="VIE">越南</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

</template>

<script>

import {mapState} from "vuex";

export default {
  name: 'Language',
  data() {
    return {
      fullscreenLoading:false,
      iconMap:{
        en:require('@/assets/images/en.png'),  //英文
        zh:require('@/assets/images/cn.png'),  //中文
      },
      strMap:{
        zh:{language:'zh',country:'CN'},
        en: {language:'en',country:'US'},
        VIE:{language:'VIE',country:'VIE'},
      }
    }
  },
  computed: {
    ...mapState({
      language: state => state.app.language,
      country:state => state.app.country
    }),

  },
  mounted() {
  },
  methods: {
    handleCommand(e){
      this.fullscreenLoading = true
      const { language, strMap} = this;
      console.log(strMap[e],e)
        this.$store.dispatch('app/setLanguage', strMap[e]).then(res => {
          this.fullscreenLoading = false
        })
    },
    click() {
      this.fullscreenLoading = true
      const { language, strMap} = this;
      this.$store.dispatch('app/setLanguage', strMap[language]).then(res=>{
        this.fullscreenLoading = false
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.language {
  display: inline-block;
  cursor: pointer;
  fill: #5a5e66;
  width: 17px;
  height: 17px;
  vertical-align: -2px;
}
.hover-effect:hover {
  background-color: #{'var(--current-dark)'}!important;
}
</style>
